<template>
	<div class="goodDetail" id="transitionName">
		<Detail-Header title="商品详情"></Detail-Header>
		<div class="goodDetailList">
			<ul style="background: white;">
				<li>
					<div class="goodDetaiSwipe">
						<mt-swipe :auto="4000">
							<mt-swipe-item v-for="list in goodSwipe">
								<img :src="list.goodsSwipeImg" alt="图片">
							</mt-swipe-item>
						</mt-swipe>
					</div>
					<div class="goodDetailMain">
						<!-- <div class="gooDetailNumber">商品编号：{{goodDetail.number}}</div> -->
						<div class="goodDetailName">{{goodDetails.product_class_name}}</div>
						<div style="text-align: justify;font-size: 0.348rem;">
							<span style="margin-left:-.2rem;color:#FF4B3D;">【{{goodDetails.goods_bright}}】</span>
							{{goodDetails.goods_title}}
						</div>
						<!-- <div class="goodDetailColor">{{goodDetail.color}}</div> -->
						<div class="goodDetailPaid">￥{{goodDetails.price}}</div>
						<div style="font-size: 15px;"><span>库存：{{goodDetails.amount}}</span></div>
					</div>

					<div class="goodDetailValue">
						<div class="_Value">购买数量：</div>
						<div class="_cartNumber" style="margin-left: 2rem;">
							<a href="javascript:;" @click="jian()" class="goodDetailReduce">-</a>
							<input type="text" v-model="goodDetails.goods_value" readonly="readonly" />
							<a href="javascript:;" @click="jia()" class="goodDetailAdd">+</a>
						</div>
					</div>

					<Detail-Layer></Detail-Layer>
					<Detail-Evaluate :goodsId="goodDetails.goods_id"></Detail-Evaluate>

					<div class="goodDetailBox">
						<mt-navbar v-model="selected">
							<mt-tab-item id="tab-container1">图文详情</mt-tab-item>
							<mt-tab-item id="tab-container2">参数</mt-tab-item>
						</mt-navbar>


						<mt-tab-container v-model="selected" swipeable>
							<mt-tab-container-item id="tab-container1">
								<div class="goodDetailImg">
									<p v-for="Image in goodImages">
										<img v-bind:src="Image.goodsIntroduceImg" alt="详情图片">
									</p>
								</div>
							</mt-tab-container-item>

							<mt-tab-container-item id="tab-container2">
								<div class="peizhi" v-html="goodDetails.goods_peizhi"></div>
							</mt-tab-container-item>
						</mt-tab-container>

					</div>


					<div class="goodDetailFooter">
						<div class="left">
							<div class="cart" @click="goTOCarts()">
								<div class="cartlength">{{cartlength}}</div>
								<i class="iconfont icon-gouwuche icon-size"></i>
								<span>购物车</span>
							</div>
							<div class="collection">
								<div class="collection-box" @click="addCollection(goodDetail)" v-show="!ces">
									<i class="iconfont icon-collection"></i>
									<span>收藏</span>
								</div>
								<div class="collection-box" @click="addCollection(goodDetail)" v-show="ces">
									<i class="iconfont icon-shoucangxuanzhong1" style="color:red"></i>
									<span style="color:red">取消</span>
								</div>
							</div>
							<div class="shop">
								<i class="iconfont icon-dianpu icon-size"></i>
								<!-- <img src="http://p6563v2ck.bkt.clouddn.com/%E5%BA%97%E9%93%BA_2.png" > -->
								<!-- <i class="iconfont icon-xuanzekuangxuanzhong" v-show="!$store.state.collection"></i>
                                <i class="iconfont icon-xuanzekuangxuanzhong" v-show="$store.state.collection" style="color:red"></i> -->
								<span>店铺</span>
							</div>
						</div>
						<div class="rigth">
							<div class="add">
								<a href="javascript:void(0);" @click="add(goodDetails)">加入购物车</a>
							</div>
							<div class="purchase">
								<a href="javascript:void(0);" @click="pay(goodDetails.goods_id,goodDetails.goods_value,goodDetails.price)">提交订单</a>
							</div>
						</div>

					</div>

				</li>
			</ul>
		</div>
	</div>
</template>

<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script>
	import {
		Toast,
		MessageBox,
		Navbar,
		TabItem,
		TabContainer,
		TabContainerItem
	} from "mint-ui";
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import DetailHeader from "./component/DetailHeader";
	import DetailLayer from "./component/DetailLayer";
	import DetailEvaluate from "./component/DetailEvaluate";
	import state from '../../vuex/state.js';
	import qs from "qs"
	export default {
		name: "goodDetail",
		data() {
			return {
				active: "1",
				goodDetailHeader: "商品详情",
				selected: "tab-container1",
				goodDetails: [],
				goodImages: [],
				goodSwipe: [],
				cartlength: 0,
				ces: false,
				amount: 0
			};
		},
		components: {
			DetailHeader,
			DetailLayer,
			DetailEvaluate
		},
		computed: {
			paid: function() {
				var paid = 0;
				for (var i in this.goodDetails) {
					paid += this.goodDetails[i].value * this.goodDetails[i].price;
				}
				return paid;
			}
		},
		computed: {
			...mapGetters(
				["this.$store.state.carts"],
				["this.$store.state.todos"],
				["this.$store.state.collection"],
				["this.$store.state.ces"]
			)
		},
		mounted() {
			if (this.$store.state.carts != undefined) {
				this.cartlength = this.$store.state.carts.length;
			}
		},
		created() {
			var _this = this;
			var id = this.$route.query.id;
			// console.log(id)
			_this.$http.get('/api/good_detail/show_detail', {
					params: {
						goodId: id
					}
				})
				.then(res => {
					// console.log(res)
					_this.goodDetails = res.body.goodDetails[0];
					_this.goodImages = res.body.goodImages;
					_this.goodSwipe = res.body.goodSwipe;
				});
		},
		methods: {
			addCollection(index) {
				console.log(this.$store.state.ces)
				this.ces = !this.ces
				var data = {
					id: index.id,
					img: index.homeImg,
					name: index.homeName,
					price: index.homePrice
				}
				this.$store.dispatch("setGoods", data)
			},
			// 点击按钮时，首先判断该商品是否在购物车已存在，如果存在则增加数量
			add: function(index) {
				// console.log(index);
				this.$http.get('/api/good_detail/find_amount?goodsId=' + index.goods_id)
				.then(res => {
					if(res.body.data >= index.goods_value){
						var idExist = this.$store.state.carts.find(todo => {
							return todo.id == index.goods_id;
						});
						if (!idExist) {
							var data = {
								id: index.goods_id,
								name: index.product_class_name,
								price: index.price,
								value: index.goods_value,
								img: index.goods_img,
								danxuan: ""
							};
							if (this.$store.state.user.length != 0) {
								// alert("a")
								var data1 = {
									goodsId: index.goods_id,
									name: index.product_class_name,
									price: index.price,
									value: index.goods_value,
									img: index.goods_img,
									danxuan: "",
									userId: this.$store.state.user[0].userId
								}
								var cartData = []
								cartData.push(data1);
								if (localStorage.getItem("carts") != null) {
									// alert("cart != null")
									console.log(this.$store.state.carts.length);
									for (var i = 0; i < this.$store.state.carts.length; i++) {
										data1 = {
											goodsId: this.$store.state.carts[i].goodsId,
											name: this.$store.state.carts[i].name,
											price: this.$store.state.carts[i].price,
											value: this.$store.state.carts[i].value,
											img: this.$store.state.carts[i].img,
											danxuan: "",
											userId: this.$store.state.user[0].userId
										}
										cartData.push(data1);
									}
									localStorage.removeItem("carts");
								}
						
								this.$http.post('/api/cart/add_redis', {
									items: cartData
								})
								.then(res => {
									// this.$store.state.carts = res.body.data.items;
									// localStorage.setItem("carts", JSON.stringify(res.body.data.items));
									this.cartlength = res.body.data.items.length;
								});
							} else {
								this.$store.dispatch('setCart', data);
								this.cartlength = this.$store.state.carts.length;
							}
						} else {
							if (this.$store.state.user.length != 0) {
								// alert("b")
								var data1 = {
									goodsId: index.goods_id,
									name: index.product_class_name,
									price: index.price,
									value: index.goods_value,
									img: index.goods_img,
									danxuan: "",
									userId: this.$store.state.user[0].userId
								}
								var cartData = []
								cartData.push(data1);
								if (localStorage.getItem("carts") != null) {
									for (var i = 0; i < this.$store.state.carts.length; i++) {
										data1 = {
											goodsId: this.$store.state.carts[i].goodsId,
											name: this.$store.state.carts[i].name,
											price: this.$store.state.carts[i].price,
											value: this.$store.state.carts[i].value,
											img: this.$store.state.carts[i].img,
											danxuan: "",
											userId: this.$store.state.user[0].userId
										}
										cartData.push(data1);
									}
									localStorage.setItem("carts", null);
								}
								this.$http.post('/api/cart/add_redis', {
									items: cartData
								})
								.then(res => {
									// this.$store.state.carts = res.body.data.items;
									// localStorage.setItem("carts", JSON.stringify(res.body.data.items));
									this.cartlength = res.body.data.items.length;
								});
							} else {
								this.$store.state.carts.find(todo => {
									if (todo.id == index.goods_id) {
										/* 先删除数据*/
										this.$store.state.carts.splice($.inArray(todo, this.$store.state.carts), 1)
										todo.value += index.goods_value
										/* 再添加*/
										this.$store.state.carts.push(todo)
										localStorage.setItem("carts", JSON.stringify(state.carts));
									}
								});
							}
						}
						/* 提示弹框*/
						// MessageBox("提示", "商品已存在购物车");
						Toast({
							message: "加入购物车成功！",
							iconClass: "iconfont icon-goumaichenggong-copy",
							duration: 950
						});
					}else{
						Toast({
							message: "库存不足",
							iconClass: "iconfont icon-goumaichenggong-copy",
							duration: 950
						});
					}
				});
				
				
				
			},
			jia: function() {
				this.goodDetails.goods_value++;

			},
			jian: function() {
				if (this.goodDetails.goods_value == 1) {
					this.goodDetails.goods_value = 1;
				} else {
					this.goodDetails.goods_value--;
				}
			},
			//返回上一级
			fanhui: function() {
				this.$router.go(-1);
			},
			pay: function(id, value, price) {
				var goodsIdList = [],valuesList = [],priceList = [];
				goodsIdList.push(id);
				valuesList.push(value);
				priceList.push(price);
				// console.log(goodsIdList + " " + valuesList + " " + priceList)
				this.$http.get('/api/good_detail/find_amount?goodsId=' + id)
				.then(res => {
					if(res.body.data >= value){
						if (this.$store.state.user.length != 0) {
							// alert(id + " " + value + " " + price)
							this.$http.get('/api/order/add_order_temporary',{
								params: {
									goodsId: goodsIdList,
									value: valuesList,
									price: priceList,
									userId: this.$store.state.user[0].userId
								}
							});
							
							this.$router.push({
								path: "pay",
								query: {
									goodsId: id,
									value: value,
									userId: this.$store.state.user[0].userId
								}
							});
						} else {
							Toast({
								message: "请先登陆",
								iconClass: "iconfont icon-error",
								duration: 950
							});
							this.$router.push({
								path: 'login'
							})
						}
					}else{
						Toast({
							message: "库存不足",
							iconClass: "iconfont icon-goumaichenggong-copy",
							duration: 950
						});
					}
				});


				// Toast({
				//     message: `成功支付了${this.paid}元`,
				//     iconClass: "iconfont icon-goumaichenggong",
				//     duration: 750
				// });
				// alert(`成功支付了${this.paid}元`)
				//   var data = {
				//     id: this.goodDetails[index].id,
				//     name: this.goodDetails[index].homeName,
				//     price: this.goodDetails[index].homePrice,
				//     image: this.goodDetails[index].homeImg,
				//     value: this.goodDetails[index].homeValue,
				// order: this.goodDetails[index].order,
				// color: this.goodDetails[index].color,
				// number: this.goodDetails[index].number
				//   };
				//   this.$store.commit("addorder", data);
				// }
			},
			goTOCarts: function() {
				this.$router.push({
					path: 'cart'
				})
			}
		}
	};
</script>

<style lang="stylus">
	// .goodDetail {
	// width: 100%;
	// height: 100%;
	// z-index: 999;
	// top: 0;
	// left: 0;
	// background: white;
	// }
	.peizhi {
		width: 90%;
		margin: auto;

		div {
			margin-bottom .5rem;
			margin-top .5rem;
		}

		h3 {
			height: 2rem;
			line-height: 2.3rem;
			font-size: 0.5rem;
			border-bottom: 1px solid #ccc;
		}

		span {
			font-size: 0.38rem;
			color: #888;
			margin-top: 0.3rem;
			display: block;
		}

		p {
			height 0.61rem;
			font-size: 0.38rem;
			color: #888;
		}
	}

	.cartlength {
		width: 15px;
		height: 15px;
		position: absolute;
		top: 1px;
		left: 30px;
		background: #f81301;
		border-radius: 50%;
		text-align: center;
		line-height: 15px;
		color: white;
	}

	.goodDetailList {
		margin-bottom: 1rem;
		padding-top: 1.45rem;
	}

	.goodDetailHeader {
		width: 100%;
		z-index: 1;
		height: 1.3rem;
		line-height: 1.3rem;
		font-size: 12px;
		background: white;
		position: fixed;
		box-shadow: 0 0 10px #cecece;
		text-align: center;
		font-size: 0.41rem;
	}

	.goodDetailHeader i {
		display: block;
		float: left;
		height: 50px;
		padding-left: 0.3rem;
		font-size: 0.71rem;
		color: black;
	}

	.goodDetaiSwipe {
		height: 8rem;
		margin-top: 3px;
		background: white;
	}

	.goodDetaiSwipe img {
		width: 70%;
		height: 7rem;
		display: block;
		/* margin-top: 60px; */
		margin: auto;
	}

	.goodDetailMain {
		/* height: 1.8rem; */
		background: white;
		border-bottom: 1px solid #cecece;
		// border-top: 1px solid #cecece;
		padding: 0.4rem;
		margin-top: -15px;
	}

	// .goodDetailBox {
	// height: 1px;
	// }
	.goodDetailName {
		color: black;
		font-weight: 400;
		font-size: 0.5rem;
		line-height 1rem
	}

	.goodDetailPaid {
		color: #f81200;
		font-size: 0.7rem;
		margin-top: 0.1rem;
	}

	.goodDetailFooter {
		position: fixed;
		width: 100%;
		bottom: 0rem;
		height: 1.2rem;
		background: #F6F4F7;
		border-top: 1px solid #efefef;

		.left {
			width: 45%;
			float: left;
			position: relative;
			font-size: .35rem;

			.cart {
				width: 33%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				float: right;
				position: relative;

				img {
					width: 0.76rem;
					height: 0.7rem;
					display: block;
					margin: auto;
				}

				span {
					text-align: center;
					color: #767676;
				}
			}

			.shop {
				width: 33%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				float: right;

				img {
					width: 0.76rem;
					height: 0.7rem;
					display: block;
					margin: auto;
				}

				span {
					display: block;
					text-align: center;
					color: #767676;
				}
			}

			.collection {
				width: 33%;
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				float: right;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				color: #767676;

				.collection-box {
					text-align: center;

				}

				i {
					font-size: 0.6rem;
					display: block;
					text-align: center;
				}

				span {
					text-align: center;
				}
			}
		}

		.rigth {
			width: 55%;
			float: right;

			.add {
				a {
					display: block;
					width: 50%;
					height: 1.2rem;
					line-height: 1.2rem;
					text-align: center;
					background: #FF9800;
					color: white;
					font-size: 0.35rem;
					float: left;
				}
			}

			.purchase {
				a {
					float: left;
					display: block;
					width: 50%;
					height: 1.2rem;
					line-height: 1.2rem;
					text-align: center;
					color: white;
					font-size: 0.35rem;
					background: #E3211E;
				}
			}
		}
	}

	.gooDetailNumber {
		display: none;
	}

	.add a {}

	.purchase a {}

	.goodDetailImg {
		margin-top: 4px;
		margin-bottom: 6px;
	}

	.goodDetailImg img {
		width: 100%;
		height: auto;
		display: block;
	}

	table td {
		font-size: 0.31rem;
		text-align: center;
		color: #000;
	}

	.goodDetailValue {
		height: 2rem;
		border-bottom: 1px solid #cecece;
		padding: 0.4rem;
	}

	.goodDetailAdd {
		width: 1rem;
		height: 0.8rem;
		line-height: 0.8rem;
		display: block;
		background: white;
		float: left;
		border: 1px solid #b2b2b2;
		border-left: none;
		text-align: center;
		font-size: 0.5rem;
		color: black;
	}

	.goodDetailReduce {
		width: 1rem;
		height: 0.8rem;
		line-height: 0.8rem;
		display: block;
		background: white;
		float: left;
		border: 1px solid #b2b2b2;
		border-right: none;
		text-align: center;
		font-size: 0.5rem;
		color: black;
	}

	._cartNumber input {
		width: 1rem;
		height: 0.8rem;
		line-height: 0.8rem;
		float: left;
		border: 1px solid #b2b2b2;
		text-align: center;
		color: black;
	}

	._Value {
		float: left;
		margin-top: 0.2rem;
		font-size 0.35rem
	}

	.goodDetailColor {
		display: none;
	}

	.icon-size {
		font-size: 23px;
		margin-left: 28%;
	}

	a {
		text-decoration: none
	}

	a:focus,
	a:hover {
		text-decoration: none
	}
</style>
